{layout name="public/layout" /}
{include file='yxnavbar'}


<div class="main">
    {include file='../../plugin/weike/template/web/music/navbar'}
    <form id="music_form" action="" method="post" class="form-horizontal" role="form">
        <div class="panel panel-default" role="tabpanel" style="">
            <div class="panel-heading">音乐信息</div>
            <div class="panel-body">
                <input type="hidden" name="themeid" value="{$themeid}"/>
                <input type="hidden" name="music_id" value="{$music_id}"/>
                <div class="form-group" >
                    <label class="col-sm-2 col-xs-12 control-label">名称</label>
                    <div class="col-sm-8 col-xs-12">
                        <div class="input-group">
                            <input type="text" class="form-control" id="music_name" placeholder="请输入音乐名称" name="name"  value="{php echo !$music_id?'':$data['name'];}">
                            <span class="input-group-addon"></span>
                        </div>
                        <span class="help-block"></span>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 col-xs-12 control-label">音乐链接</label>
                    <div class="col-sm-3 col-xs-12">
                        <select class="form-control" id="musictype" name="musictype" onchange="changemusic();">
                            <option value="">请选择音乐分类</option>
                        </select>
                    </div>
                    <div class="col-sm-3 col-xs-12">
                        <select class="form-control" id = "musicname" name="musicname" onchange="changemusicname();" >
                            <option value="">请选择音乐</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 col-xs-12 control-label"></label>
                    <div class="col-sm-8 col-xs-12">
                        {php echo view_form_field_audio('music_url',$data['url']);}
                        <span class="help-block">mp3文件 不要太大 影响页面加载 用格式工厂压缩一下,控制在1M内</span>
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-2 col-xs-12 control-label">是否启用</label>
                    <div class="col-sm-9 col-md-8 col-lg-8 col-xs-12">
                        <label class="radio-inline">
                            <input name="status" value="1" {if !$music_id || $data['status']==1} checked="checked"{/if} type="radio">启用
                        </label>
                        <label class="radio-inline">
                            <input name="status" value="0" {if $music_id && $data['status']==0} checked="checked"{/if} type="radio">禁用
                        </label>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group" id="sub_upload" >
            <div class="col-sm-12">
                <input name="submit" onclick="addOrEditItem()" id="btnConfirm" type="button" value="提交" class="btn btn-primary col-lg-2">
            </div>
        </div>
    </form>
</div>


{$pager}
<script type="text/javascript">
    $(document).ready(
        function (){
            console.log('js代码');
        }
    );
    //新增\修改 提交数据
    function addOrEditItem() {
        let postUrl = "{php echo createWebUrlPlugin('weike.music.addinfo',array('themeid'=>$themeid));}";
        let formData = $("#music_form").serialize();
        console.log(formData);
        $.ajax({
            url:postUrl,
            dataType:'json',
            method:'post',
            data:formData,
            success:function (e) {
                console.log(e)
                let status = e.status;
                let result = e.result;
                if (status!=1){
                    layer.msg(result.message)
                }else{
                    layer.msg(result.message);
                    let success_redirect = "{php echo createWebUrlPlugin('weike.music.main',array('themeid'=>$themeid));}";
                    window.location.href = success_redirect;
                }
            },
            fail:function (err) {
                console.log(err)
            }
        })
    };
    var array = new Array(); //音乐名称数组
    var arraylink = new Array(); //音乐链接数组
    var music_type = '';//音乐分类名称
    //js中的二维数组的下标可以使字符串
    {loop $musiclist $row}
    array['{$row['name']}'] = [{$row['listname']}];
    arraylink['{$row['name']}'] = [{$row['listlink']}];
    {/loop}
    //java:array[0] = {"",""};
    function initProvince() {
        for(var i in array) {
            var provinceObj = document.getElementById("musictype");
            //创建一个选项
            /**
             * 参数一是：展示数据
             * 参数二是：value属性的值
             */
            var option = new Option(i, i); //jquery

            provinceObj.add(option); //把创建的option添加到下拉列表中
            {if $system['is_lz_game']=='1'}
            var provinceObj1 = document.getElementById("game_musictype");
            //创建一个选项
            /**
             * 参数一是：展示数据
             * 参数二是：value属性的值
             */
            var option1 = new Option(i, i); //jquery

            provinceObj1.add(option1); //把创建的option添加到下拉列表中
            {/if}

            }
        }

        function changemusic() {
            var provinceName = document.getElementById("musictype").value;
            music_type = provinceName;
            //得到第一个下拉列表的值
            var city = document.getElementById("musicname");
            //清空第二个下拉列表
            //方法一
            //city.innerHTML = "";
            //方法二
            city.options.length = 1;
            for(var p in array) {
                if(p == provinceName) {
                    //遍历每个省份的城市
                    for(var c in array[p]) {
                        //创建一个option
                        var option = new Option(array[p][c], arraylink[p][c]);
                        var city = document.getElementById("musicname");
                        city.add(option);
                    }
                }
            }
        }
        //游戏使用
        function changegamemusic() {
            var provinceName = document.getElementById("game_musictype").value;
            //得到第一个下拉列表的值
            var city = document.getElementById("game_musicname");
            //清空第二个下拉列表
            //方法一
            //city.innerHTML = "";
            //方法二
            city.options.length = 1;
            for(var p in array) {
                if(p == provinceName) {
                    //遍历每个省份的城市
                    for(var c in array[p]) {
                        //创建一个option
                        var option = new Option(array[p][c], arraylink[p][c]);
                        var city = document.getElementById("game_musicname");
                        city.add(option);
                    }
                }
            }
        }
        function changegamemusicname() {
            var musicname = document.getElementById("game_musicname").value;
            $(".audio-player-media").val(musicname);
        }
        //游戏使用结束
        function changemusicname() {
            var musicname = document.getElementById("musicname").value;
            $(".audio-player-media").val(musicname);
            for(var i in arraylink[music_type]){
                if(arraylink[music_type][i] == musicname){
                    $("#music_name").val(array[music_type][i]);
                    break
                }
            }
        }
        initProvince();


        {if $system['ispresale']==1}
        function presale_initProvince() {
            for(var i in array) {
                var provinceObj = document.getElementById("presale_musictype");
                //创建一个选项
                /**
                 * 参数一是：展示数据
                 * 参数二是：value属性的值
                 */
                var option = new Option(i, i); //jquery

                provinceObj.add(option); //把创建的option添加到下拉列表中

            }
        }

        function presale_changemusic() {
            var provinceName = document.getElementById("presale_musictype").value;
            //得到第一个下拉列表的值
            var city = document.getElementById("presale_musicname");
            //清空第二个下拉列表
            //方法一
            //city.innerHTML = "";
            //方法二
            city.options.length = 1;
            for(var p in array) {
                if(p == provinceName) {
                    //遍历每个省份的城市
                    for(var c in array[p]) {
                        //创建一个option
                        var option = new Option(array[p][c], arraylink[p][c]);
                        var city = document.getElementById("presale_musicname");
                        city.add(option);
                    }
                }
            }
        }
        function presale_changemusicname() {
            var musicname = document.getElementById("presale_musicname").value;
            $(".audio-player-media").val(musicname);
        }
        presale_initProvince();
        {/if}


</script>
